<template>
  <div class="CommonSelect">
    <div v-if="isArray" >
      <div class="label" :class="{ required }">{{ label }}</div>
      <div>
        <van-checkbox-group
          :value="currentValue"
          :disabled="false"
          @change="handleCheckboxChange"
        >
          <div class="options-list">
            <div
              class="options-item"
              v-for="item in currentOptions"
              :key="item.id"
            >
              <div class="content">
                <van-checkbox
                  :name="item.id"
                  icon-size="15px"
                  checked-color="#D1272F"
                >
                  <div class="text">{{ item.name }}</div>
                </van-checkbox>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </div>

    <picker
      v-else-if="mode === 'region'"
      @change="handlePickerChange"
      :value="indexValue"
      :mode="mode"
      :disabled="disabled"
    >
      <div>
        <div class="label" :class="{ required }">{{ label }}</div>
        <div>
          <span
            class="value-wrap"
            :class="{ disabled: disabled }"
          >
            <span v-if="mode === 'selector'">{{
              (findItem && findItem.name) || ""
            }}</span>
            <span v-else>{{ currentValue }}</span>
            <i
              class="iconfont icondrop-down icon"
              v-if="!isView && !disabled"
            ></i>
          </span>
        </div>
      </div>
    </picker>

    <picker
      v-else
      @change="handlePickerChange"
      :value="indexValue"
      :range="currentOptions"
      range-key="name"
      :mode="mode"
      :fields="dateFields"
      :start="dateStart"
      :disabled="disabled"
    >
      <div>
        <div class="label" :class="{ required }">{{ label }}</div>
        <div>
          <span
            class="value-wrap"
            :class="{ disabled: disabled }"
          >
            <span v-if="mode === 'selector'">
              {{ (findItem && findItem.name) || "" }}</span
              >
            <span v-else>{{ currentValue }}</span>
            <i
              class="iconfont icondrop-down icon"
              v-if="!isView && !disabled"
            ></i>
          </span>
        </div>
      </div>
    </picker>
  </div>
</template>

<script>
import api from '@/api'
import isEqual from 'lodash.isequal'
import cloneDeep from 'lodash.clonedeep'

export default {
  props: {
    value: {
      type: [String, Number, Array],
      required: true,
    },
    options: {
      type: Array,
      default () {
        return []
      },
    },
    label: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
    },
    mode: {
      type: String,
      default: 'selector',
    },
    dateFields: {
      type: String,
      default: 'day',
    },
    dateStart: {
      type: String,
      default: '1900-01-01',
    },
    isView: {
      type: Boolean,
    },
    dictType: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      show: false,
      currentValue: this.value,
      dictOptions: [],
    }
  },
  computed: {
    isArray () {
      return Array.isArray(this.value)
    },
    findItem () {
      return this.currentOptions.find(item => {
        return parseInt(item.value, 10) === parseInt(this.value, 10)
      })
    },
    indexValue () {
      if (this.mode === 'date') {
        return this.currentValue
      } else {
        return this.currentOptions.findIndex(item => parseInt(item.value, 10) === parseInt(this.value, 10))
      }
    },
    currentOptions () {
      if (this.dictType) {
        return this.dictOptions
      } else {
        return this.options
      }
    },
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler () {
        if (this.isArray) {
          if (!isEqual(this.value, this.currentValue)) {
            this.currentValue = cloneDeep(this.value)
          }
        } else {
          this.currentValue = this.value
        }
      },
    },
    currentValue: {
      deep: true,
      handler () {
        if (this.isArray) {
          this.$emit('input', cloneDeep(this.currentValue))
        } else {
          this.$emit('input', this.currentValue)
        }
      },
    },
  },
  created () {
    if (this.dictType) {
      this.fetchDictOptions()
    }
  },
  methods: {
    async fetchDictOptions () {
      const { result } = await api.getDict({
        type: this.dictType,
      })
      this.dictOptions = result.map(item => ({
        name: item.name,
        value: item.id,
      }))
    },
    handlePickerChange (e) {
      if (this.mode === 'selector') {
        this.currentValue = this.currentOptions[e.target.value].value
      } else if (this.mode === 'region') {
        const region = e.target.value
        this.currentValue = `${region[0]}-${region[1]}-${region[2]}`
      } else {
        this.currentValue = e.target.value
      }
    },
    handleCheckboxChange (e) {
      this.currentValue = e.detail
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonSelect {
	.options-list {
		padding: 5px 0;

		.options-item {
			.text {
				color: #666;
			}
		}
	}

	.label {
		@include label;
	}

	.value-wrap {
		display: inline-block;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		min-width: 330rpx;
		max-width: calc(100vw - 20px);
		height: 31px;
		padding-left: 16px;
		padding-right: 30px;
		border: 1px solid rgba(230, 230, 230, 1);
		border-radius: 3px;
		line-height: 31px;
		text-overflow: ellipsis;
		color: #666;
		white-space: nowrap;

		&.disabled {
			padding-left: 0;
			border: 1px solid transparent;
		}

		.icon {
			position: absolute;
			right: 6px;
			top: 1px;
			opacity: .5;
			color: #666;
		}
	}
}
</style>
